<script lang="ts" setup>
import { PropType, computed, useAttrs, mergeProps } from "vue";
import { Button } from "@opentiny/vue"
import { useIconRender } from "@/hooks";
declare type SizeType  = 'large' | 'medium' | 'small' | 'mini';
declare type IButtonType  = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
declare type NativeType  = 'button' | 'submit' | 'reset'
const props = defineProps({
  type: {
    type: String as PropType<IButtonType>, default: undefined
  },
  size: {
    type: String as PropType<SizeType>, default: ""
  },
  icon: {
    type: String, default: undefined
  },
  resetTime:{
    type: Number, default: 0
  },
  autofocus:{
    type: Boolean, default: false
  },
  circle:{
    type: Boolean, default: false
  },
  disabled:{
    type: Boolean, default: false
  },
  ghost:{
    type: Boolean, default: false
  },
  loading:{
    type: Boolean, default: false
  },
  plain:{
    type: Boolean, default: false
  },
  round:{
    type: Boolean, default: false
  },
  text:{
    type: String, default: undefined
  },
  nativeType:{
    type: String as PropType<NativeType>, default: "button"
  }
})
defineOptions({
  name:"app-button",
  inheritAttrs: false,
  extends: Button
})
const attrs = useAttrs()

const iconComp = computed(()=>{
  return props.icon? useIconRender(props.icon,16): undefined
})
const newProps = mergeProps(props,attrs)
const emit = defineEmits<{
  (e: 'click', args:any): void
}>()
const onClick = (...args:any)=>{
  emit('click', ...args)
}
</script>

<template>
  <tiny-button class="app-button" v-bind="newProps" :icon="iconComp" @click="onClick" style="">
    <slot/>
    <slot name="modal"></slot>
  </tiny-button>
</template>

<style scoped>
.app-button{
  --ti-button-size-normal-padding: 4px;
}
</style>